<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddAweme ref="add_aweme" @getDataList="getDataList"/>
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">达人列表</span>
            <div class="flexbox flexcenter">
                <el-input placeholder="星图 ID、达人名称" size="small" style="width:216px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                </el-input>
                <el-button type="primary" style="margin-left:12px" size="small" icon="el-icon-circle-plus-outline" @click="addAweme">达人截图任务</el-button>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="xt_name" label="达人名称"></el-table-column>
                <el-table-column prop="xt_id" label="星图 ID"></el-table-column>
                <el-table-column prop="create_time" label="添加时间"></el-table-column>
                <el-table-column prop="update_time" label="执行时间"></el-table-column>
                <el-table-column prop="status" label="状态/操作" width="110">
                    <template slot-scope="scope">
                        <span class="color_02 font_14" v-if="scope.row.status==0">等待执行</span>
                        <span class="color_02 font_14" v-else-if="scope.row.status==1">执行中...</span>
                        <el-link type="primary" v-else-if="scope.row.status==2" :underline="false"  :href="scope.row.result_url" target="_blank">下载</el-link>
                        <span class="color_02 font_14" v-else-if="scope.row.status==-1">失败</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddAweme from './AddAweme';
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                query: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/awemeshot/awemeList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 添加达人
        addAweme(){
            this.$refs.add_aweme.dialogVisible = true
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddAweme
    },
};
</script>


<style scoped>
.table_box {
    padding-top: 0;
}

</style>



